<template>
    <div class="home-recommond">
        <div class="TJ">推荐歌单</div>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index" 
            @click="selectItem(item)">
                <div class="cover">
                    <van-image :src="item.cover" radius="1rem"/>
                    <span>{{item.listen_num | numFilter(1)}}万</span>
                </div>
                <span>{{item.title}}</span>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import  {betterScrollHorizontal} from '../../common/betterScorll.js';
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getListData()
    },
    methods: {
        getListData(){
            //获取到推荐歌单数据
            this.$request('get','/recommend/playlist/u')
            .then(res=>{
                console.log(res);
                if(res.result == 100){
                    this.listData = res.data.list;
                }
                betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.listData.length,10);//调用横向滚动的方法               //console.log(this.listData)
            })
        },
         selectItem(item){
        const id = item.content_id//获取到歌单的id
        1|
        // this.$router.push({
        //     name:"singlist",
        //     params:{
        //         id:id
        //     }
        // })
        2|
        // this.$router.push({
        //     path:'singlist',
        //     query:(
        //         id
        //     )
        // })
        3|
        // this.$router.push(`/singlist/${id}`)
        4|
        this.$router.push({path:`/singlist/${id}`})
    },
        //水平滚动
        // betterScrollHorizontal(num,itemWidth){
            
        //     this.$refs.content.style.width = num * itemWidth + "rem";

        //     this.$nextTick(() => {
        //     this.scroll = new BScroll(this.$refs.wrapper, {
        //         scrollX: true,//横向滚动
        //         scrollY: false,
        //         startX: 0,
        //         //click: true
        //     })
        // })
        // }
        
    },
    //列表项的单击事件
   
    filters: {
            numFilter(value,num){
                return parseFloat(value/10000).toFixed(num)
            }
        }
};
</script>

<style  scoped>
.wrapper{
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
    .home-recommond ul>li{
        /* width: calc((100% - 1rem) / 3 * 1);
        widows: 200px; */
        display: inline-block;
        width: 10rem;
    }
    /* .home-recommond ul > li img{
        width: 90%;
        border-radius: 1rem;
    } */
    /* .home-recommond ul > li :nth-of-type(3n+2){
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    } */
    /* content{
        width: calc(12 * 10rem);
    } */
    ul.content li {
       width: 10rem;
        display: inline-block;
        vertical-align: top;
    }
    ul.content li * {
        margin: 0.1rem;
    }
    .cover{
        position: relative;
    }
    .cover>span{
        position: absolute;
        right: 0;
        bottom: 0.3rem;
        background-color:red;
       right: 0.2rem;
       color: white;
       font-size: 14px;
       border-radius: 1rem;
       width: 5rem;
       display: inline-block;

    }
    ul.content li > span{
        font-size: 0.8rem;
        color: #54493b;
    }
    .TJ{
        margin-top: 20px;
        font-size: 30px;
    }
</style>